<template>
    <view class="detail pr">
    	<view class="detail_box">
    		<view class="card">
    			<view class="card_box x-f">
    				<image src="/static/image/money.png" mode=""></image>
    				<view class="text ">
    					<view class="name">{{coupons.coupon_name}}</view>
    					<view class="date">有效期{{coupons.use_start_time}}至{{coupons.use_end_time}}</view>
    				</view>
    			</view>
    			<view class="score"><span class="num">{{coupons.points}}</span><span class="name">积分</span></view>
    			<view class="use">
    				<view class="text1">使用门槛</view>
    				<view class="name1" v-if="coupons.name != null">仅限{{coupons.name}}店铺使用</view>
    				<view class="name1" v-if="coupons.name == null">通用</view>
    			</view>
    			<view class="use">
    				<view class="text1">有效期</view>
    				<view class="name2">{{coupons.use_start_time}}至{{coupons.use_end_time}}</view>
    			</view>
    			<view class="use">
    				<view class="text1">状态</view>
    				<view class="name3">{{coupons.status}}</view>
    			</view>
    			<view class="btn x-c x-c" v-if="coupons.status == '待使用'" @click="jump(coupons)">立即使用</view>
    			<view class="btn x-c x-c" v-if="coupons.status == '已使用'" :class="{'showUse': coupons.status == '已使用' }" >立即使用</view>
    			<view class="btn x-c x-c" v-if="coupons.status == '已过期'" :class="{'showUse': coupons.status == '已过期'}">立即使用</view>
    		</view>
    	</view>
    </view>
</template>
<script>
	export default {
		data() {
			return {
				showCode: false,   // 打开二维码
				obj: {
					shop_id: '',
					page: 1,
					pagesize: 6
				}
			};
		},
		props: {
			coupons: {
				type: Object,
				default: {}
			},
		},
		methods: {
			jump(item) {
				if(this.coupons.shop_id != null) {
					this.$Router.push({
						path: '/pages/store/detail/detail',
					})
					this.$store.dispatch('sellers/get_shopId',item.shop_id)
				} else {
					this.$store.dispatch('init/get_tabbarActive', 0);
					this.$Router.push({
						path: '/pages/home_index/home_index',
					})
					
				}
			},
			close() {
				this.showCode = false
			}
		}

	};
</script>

<style scoped lang="scss">
	.showUse {
		background: linear-gradient(269deg,#dddddd 5%, #bfbfbf 95%)!important;
	}
	.code {
		background: rgba(#000000,0.7);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.qrcard {
			margin: 200rpx 66rpx 332rpx 66rpx;
			width: 618rpx;
			height: 724rpx;
			background-color: #fff;
			border-radius: 24rpx;
			font-size: 24rpx;
			.text {
				padding: 50rpx 0 22rpx 0;
				color: #ff2d1b;
				line-height: 24rpx;
			}
			.num {
				padding: 20rpx 0 18rpx 0;
				font-size: 28rpx;
				line-height: 36rpx;
				letter-spacing: 2rpx;
			}
			.name {
				padding: 0 0 36rpx 0;
				color: #030303;
				line-height: 36rpx;
			}
			.code01 {
				width: 444rpx;
				height: 184rpx;
			}
			.code02 {
				width: 232rpx;
				height: 232rpx;
			}
			.close {
				transform: translateY(110rpx);
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
	.detail {
		width: 100%;
		height: 100vh;
		font-size: 28rpx;
		color: #333;
		background: linear-gradient(180deg,#ffe9c7, #ffc977);
		.detail_box {
			padding: 120rpx 34rpx ;
			display: flex;
			justify-content: center;
			.card {
				background: url(/static/image/coupons.png) no-repeat;
				width: 100%;
				background-size: 100% 100%;
				height: 800rpx;
				padding: 140rpx 24rpx 68rpx 60rpx;
				.card_box {
					display: flex;
					border-bottom: 1px dashed #dcdcdc;
					width: 580rpx;
					image {
						margin: 10rpx 0 24rpx 0;
						width: 150rpx;
						height: 150rpx;
						background: #fff6cb;
						border-radius: 16rpx;
					}
					.text {
						width: 400rpx;
						padding: 20rpx 0 0 26rpx;
						height: 150rpx;
						.name {
							font-weight: 600;
						}
						.date {
							padding-top: 8rpx;
							font-size: 24rpx;
						}
					}
				}
				// 积分
				.score {
					padding-top: 40rpx;
					display: flex;
					justify-content: center;
					color: #e93323;
					.num {
						font-size: 74rpx;
						font-weight: 600;
					}
					.name {
						line-height: 120rpx;
					}
				}
				// 使用门槛
				.use {
					padding: 14rpx;
					display: flex;
					font-size: 26rpx;
					.text1 {
						
					}
					.name1 {
						padding: 0 0 0 56rpx;
						color: #999;
					}
					.name2 {
						padding: 0 0 0 81rpx;
						color: #999;
					}
					.name3 {
						padding: 0 0 0 105rpx;
						color: #999;
					}
				}
				.btn {
					margin: 30rpx 0 0 10rpx ;
					width: 548rpx;
					height: 76rpx;
					background: linear-gradient(269deg,#ff977b 5%, #ff2d1b 95%);
					border-radius: 38rpx;
					color: #fff;
				}
			}
		}
	}
	
</style>